<template>
	<view class="tell-box">
		<view class="top-info">
			<image src="../../static/tell_icon.png" mode=""></image>
			<view class="r">
				客服热线电话
				<view class="phone">
					400-310-8800
				</view>
			</view>
		</view>
		<view class="code-box">
			<view class="" v-for="i in tellInfo" :key="i.id">
				<image :src="i.customWeixinPic" :show-menu-by-longpress="true" mode="" @click="previewImage(i.customWeixinPic)"></image>
				<view class="name">
					<!-- 客服微信 -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryCustomWeixinInfo } from '@/api/user.js'
	export default {
		data() {
			return {
				tellInfo: []
			};
		},
		onLoad() {
			this.init()
		},
		methods:{
			init(){
				queryCustomWeixinInfo().then((res) => {
					this.tellInfo = res
				})
			},
			previewImage(e) {
				console.log('e', e);
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [e],
					// 为当前显示图片的链接/索引值
					current: e,
					// 图片指示器样式	
					indicator:'default',
					// 是否可循环预览
					loop:false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('res', res);
					}, 
					fail: err => {
						onsole.log('err', err);
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
.tell-box{
	padding-top: 32rpx;
	background: linear-gradient(180deg, #E4919D 0%, rgba(228,145,157,0) 100%);
	padding-top: 50rpx;
	padding-bottom: 35rpx;
	.top-info{
		margin: 0 32rpx;
		font-size: 28rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		image{
			width: 96rpx;
			height: 96rpx;
			margin-right: 15rpx;
		}
		.phone{
			font-size: 36rpx;
			margin-top: 6rpx;
		}
	}
	.code-box{
		min-height: 816rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 0 32rpx;
		margin-top: 48rpx;
		text-align: center;
		padding-top: 45rpx;
		padding-bottom: 45rpx;
		.name{
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: center;
		}
		image{
			width: 522rpx;
			height: 522rpx;
		}
	}
}
</style>
